<template>
  <div class="ml-2"></div>
  <t-breadcrumb :max-item-width="'150'">
    <t-breadcrumb-item v-for="(item) in routeMatched" :key="item.name">
      <template v-if="item.meta.icon" #icon>
        <t-icon :name="item.meta.icon"/>
      </template>
      {{ item.meta.title }}
    </t-breadcrumb-item>
  </t-breadcrumb>
</template>

<script setup lang="ts">
import {type RouteLocationMatched, useRoute} from "vue-router";
import {ref, type Ref, watch} from "vue";

const route = useRoute();

const routeMatched: Ref<Array<RouteLocationMatched>> = ref([]);
routeMatched.value = route.matched.slice(1);

watch(() => route.path, () => {
  routeMatched.value = route.matched.slice(1);
})
</script>

<style lang="scss" scoped>
</style>